<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./font-x/css/all.min.css">
    <!-- 引入less样式编译 -->
    <link rel="stylesheet" href="./My-sty/index.css">
</head>
<body>
    <!-- 创建顶部外部容器 -->
    <div class="external-wrapper clearfix">
        <!-- 创建内部居中容器 -->
        <div class="external-nav-wrapper w">
            <!-- 创建工作室图标和导航容器 -->
            <div class="studio-Navigation">
                <!-- 工作室图标 -->
                <div class="studio-img">
                    <img src="./project-img/工作室logo3.gif" alt="">
                </div>

                <!-- 导航容器 -->
                <ul class="Navigation-top">
                    <li class="line"></li>
                    <li class="line"></li>
                    <li class="line"></li>
                    <!-- 下拉菜单容器 -->
                    <li class="last-li">
                        <!-- 下拉菜单 -->
                        <!-- <div></div> -->
                        <ul class="drop-down">
                            <li class="word-li">
                                <a href="inspiration.html">灵感与故事</a>
                            </li>
                            <li class="lint"></li>
                            <li class="word-li">
                                <a href="perception.html">获奖与感悟</a>
                            </li>
                            <li class="lint"></li>
                            <li class="word-li">
                                <a href="aestheticism.html">美图与剧照</a>
                            </li>
                            <li class="word-li">
                                <a href="#">剧情简介</a>
                            </li>
                            <li class="lint"></li>
                            <li class="word-li">
                                <a href="#">人物简介</a>
                            </li>
                            <li class="lint"></li>
                            <li class="word-li">
                                <a href="#">热门影评</a>
                            </li>
                            <li class="lint"></li>
                            <li class="word-li">
                                <a href="#">影片意义</a>
                            </li>
                            
                        </ul>
                    </li>
                </ul>
            </div>
            
        </div>
    </div>
    <!-- 主页图片logo容器 -->
    <div class="homepage-logo">
        <div class="logo-nav w">
            <img src="./project-img/主页logo-xiao.jpg" alt="">
        </div>
    </div>
    <!-- 创建主页按钮外围容器 -->
    <div class="btn-warapper">
        <!-- 创建内部居中容器 -->
        <div class="btn-inside w clearfix">
            <div class="btn-a">
                <a href="#">SPIRITED AWAY</a>
            </div>
        </div>
    </div>
</body>
</html>  